<template>
  <div class="container">
    <div class="header">
      <div class="header-info">
        <div class="info-item">
          <div class="left">
            <div class="left-title">{{ state.header.left.title }}</div>
            <div class="left-number">{{ state.inSeat }}人</div>
          </div>
          <div class="right">
            <div class="right-picwarp">
              <img :src="LeftWarp" alt="" />
              <div class="right-pic">
                <img :src="LeftPic" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="left">
            <div class="left-title">{{ state.header.top.title }}</div>
            <div class="left-number">{{ state.outSeat }}人</div>
          </div>
          <div class="right">
            <div class="right-picwarp">
              <img :src="RightWarp" alt="" />
              <div class="right-pic">
                <img :src="RightPic" alt="" />
              </div>
            </div>
          </div>
        </div>
        <div class="info-item">
          <div class="left">
            <div class="left-title">{{ state.header.right.title }}</div>
            <div class="left-number">{{ state.allEmployee }}人</div>
          </div>
          <div class="right">
            <div class="right-picwarp">
              <img :src="LeftWarp" alt="" />
              <div class="right-pic">
                <img :src="LeftPic" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="header-title">{{ state.header.title }}</div>
      <div class="header-time">
        {{ state.main.time }} {{ weekMap[state.main.week] }}
      </div>
    </div>

    <div class="main">
      <div class="left">
        <div class="warp">
          <!-- <div class="head">
            <div class="left-title">{{ state.main.title }}</div>
            <div class="left-time">{{ state.main.time }}</div>
          </div> -->
          <div class="left-content">
            <div class="seat-left">
              <div
                class="seat"
                v-for="(item, index) in 144"
                :key="index"
                :style="{
                  backgroundColor:
                    state.leftMap.get(getRow(item) + '_' + getCol(item))
                      ?.status !== 1
                      ? 'rgba(42, 204, 240,0)'
                      : '#141984',
                }"
              >
                <div
                  class="content-warp"
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                  "
                  v-if="
                    state.leftMap.get(getRow(item) + '_' + getCol(item))
                      ?.status === 1
                  "
                >
                  <span
                    class="name"
                    v-for="nameItem in state.leftMap.get(
                      getRow(item) + '_' + getCol(item)
                    )?.name"
                    >{{ nameItem }}</span
                  >
                </div>

                <div
                  class="leave"
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    padding: 0 5px;
                    box-sizing: border-box;
                  "
                  v-if="
                    state.leftMap.get(getRow(item) + '_' + getCol(item))
                      ?.status === 2
                  "
                >
                  <span
                    class="name"
                    v-for="nameItem in state.leftMap.get(
                      getRow(item) + '_' + getCol(item)
                    )?.name"
                    >{{ nameItem }}</span
                  >
                </div>
                <div
                  class="idle"
                  v-if="
                    state.leftMap.get(getRow(item) + '_' + getCol(item))
                      ?.status != 1 &&
                    state.leftMap.get(getRow(item) + '_' + getCol(item))
                      ?.status != 2
                  "
                ></div>
              </div>
            </div>
            <div class="seat-right">
              <div
                class="seat"
                v-for="(item, index) in 144"
                :key="index"
                :style="{
                  backgroundColor:
                    state.rightMap.get(getRow(item) + '_' + getrightCol(item))
                      ?.status !== 1
                      ? 'rgba(42, 204, 240,0)'
                      : '#141984',
                }"
              >
                <div
                  class="content-warp"
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    padding: 0 5px;
                    box-sizing: border-box;
                  "
                  v-if="
                    state.rightMap.get(getRow(item) + '_' + getrightCol(item))
                      ?.status === 1
                  "
                >
                  <span
                    class="name"
                    v-for="nameItem in state.rightMap.get(
                      getRow(item) + '_' + getrightCol(item)
                    )?.name"
                    >{{ nameItem }}</span
                  >
                </div>
                <div
                  class="leave"
                  style="
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    padding: 0 5px;
                    box-sizing: border-box;
                  "
                  v-if="
                    state.rightMap.get(getRow(item) + '_' + getrightCol(item))
                      ?.status === 2
                  "
                >
                  <span
                    class="name"
                    v-for="nameItem in state.rightMap.get(
                      getRow(item) + '_' + getrightCol(item)
                    )?.name"
                    >{{ nameItem }}</span
                  >
                </div>
                <div
                  class="idle"
                  v-if="
                    state.rightMap.get(getRow(item) + '_' + getrightCol(item))
                      ?.status != 1 &&
                    state.rightMap.get(getRow(item) + '_' + getrightCol(item))
                      ?.status != 2
                  "
                ></div>
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="left-charts">
          <div class="chart1">
            <div class="chart" style="width: 100%;height: 100%" ref="chart1Ref"></div>
          </div>
          <div class="icon">
            <div class="icon-warp">
              <img :src="Icon1" alt="">
              <div class="title">到场</div>
            </div>
            <div class="icon-warp">
              <img :src="Icon2" alt="">
              <div class="title">未到</div>
            </div>
            <div class="icon-warp">
              <img :src="Icon3" alt="">
              <div class="title">应到</div>
            </div>
          </div>
          <div class="chart2">
            <div class="chart" style="width: 100%;height: 100%" ref="chart2Ref"></div>
          </div>
        </div> -->
      </div>
      <!-- 注释 消息列表  -->
      <!--      <div class="main-right">-->
      <!--        <div class="right-title">{{ state.main.right.title }}</div>-->

      <!--        <div class="right-content" ref="myTable">-->
      <!--          <div class="people" v-for="(item) in state.inouts">-->
      <!--            <div class="avater">-->
      <!--              <img :src="Avater" alt="">-->
      <!--            </div>-->
      <!--            <div class="info">-->
      <!--              <div class="name">{{ item.name }}</div>-->

      <!--            </div>-->
      <!--            <div class="status">-->
      <!--              <img :src="item.inout === 1 ? InMeeting : OutMeeting" alt="">-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { markRaw, nextTick, onMounted, reactive, ref } from "vue";
import LeftWarp from "@/assets/header/left-warp.png";
import LeftPic from "@/assets/header/left.png";
import RightWarp from "@/assets/header/right-warp.png";
import RightPic from "@/assets/header/right.png";
import Avater from "@/assets/content/avater.png";
import InMeeting from "@/assets/content/inmeeting.png";
import Icon1 from "@/assets/content/icon-1.png";
import Icon2 from "@/assets/content/icon-2.png";
import Icon3 from "@/assets/content/icon-3.png";

import OutMeeting from "@/assets/content/outmeeting.png";
import * as echarts from "echarts";
import moment from "moment";
import { useGetInfoApi } from "@/api/demo";

import getUrlParams from "@/utils/getParams.ts";
const chart1Ref = ref();
const chart2Ref = ref();
// const chartsChild2Ref = ref()
const state = reactive({
  header: {
    title: "会议动态",
    left: {
      title: "到场人数",
      number: undefined,
    },
    top: {
      title: "未到人数",
      number: undefined,
    },
    right: {
      title: "应到人数",
      number: undefined,
    },
  },
  main: {
    time: moment().format("YYYY年MM月DD日 HH:mm:ss"),
    week: moment().format("dddd"),
    title: "参会人数展示",
    charts: {
      title1: "在场人数",
      title2: "离场人数",
      title3: "在场",
      title4: "离开",
      title5: "空闲",
      myCharts: [] as any,
      data1: undefined as any,
      data2: undefined as any,
    },
    right: {
      title: "会议人员实时出入",
    },
  },
  left: [],
  right: [],
  inouts: [],
  idle: 0,
  inSeat: undefined,
  outSeat: undefined,
  allEmployee: undefined,
  leftMap: new Map(),
  rightMap: new Map(),
});

const weekMap = {
  Sunday: "星期日",
  Monday: "星期一",
  Tuesday: "星期二",
  Wednesday: "星期三",
  Thursday: "星期四",
  Friday: "星期五",
  Saturday: "星期六",
};

setInterval(() => {
  state.main.time = moment().format("YYYY年MM月DD日 HH:mm:ss");
}, 1000);

const initChart1 = (data) => {
  state.main.charts.data1 = markRaw(echarts.init(chart1Ref.value));
  var value = data;
  const option = {
    backgroundColor: "000",
    title: {
      text: `${value}人`,
      subtext: "到场人数",
      left: "center",
      top: "center", //top待调整
      textStyle: {
        color: "#fff",
        fontSize: 24,
        fontFamily: "DINAlternate-Bold",
      },
      subtextStyle: {
        color: "#fff",
        fontSize: 18,
        fontFamily: "PingFangSC-Regular",
        top: "center",
      },
      itemGap: 2, //主副标题间距
    },
    xAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "56%"],
        data: [
          {
            value: value,
            itemStyle: {
              normal: {
                borderWidth: 15,
                borderRadius: 0,
                borderColor: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#376CCB", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#27DEF7", // 100% 处的颜色
                    },
                  ],
                },
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
          },
          {
            name: "gap",

            value: 288 - value,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          },
        ],
      },
      //刻度尺
      {
        // name: "白色圈刻度",
        type: "gauge",
        radius: "87%",
        startAngle: 225, //刻度起始
        endAngle: -134.8, //刻度结束
        z: 4,
        axisTick: {
          show: true,
          lineStyle: {
            width: 2,
            color: "rgba(1,244,255, 0.9)",
          },
        },
        splitLine: {
          length: 16, //刻度节点线长度
          lineStyle: {
            width: 2,
            color: "rgba(1,244,255, 0.9)",
          }, //刻度节点线
        },
        axisLabel: {
          color: "rgba(255,255,255,0)",
          fontSize: 12,
        }, //刻度节点文字颜色
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            opacity: 0,
          },
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 0,
            name: "",
          },
        ],
      },
      // 刻度圈
      {
        type: "pie",
        radius: ["0%", "73%"],
        center: ["50%", "50%"],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center",
          },
          emphasis: {
            show: false,
            textStyle: {
              fontWeight: "bold",
            },
          },
        },
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0.05,
                  color: "rgba(32,36,107, 0.2)",
                },
                {
                  offset: 0.5,
                  color: "rgba(32,36,107,0.3)",
                },
                {
                  offset: 0.95,
                  color: "rgba(32,36,107, 0.2)",
                },
              ],
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 3235,
          },
        ],
      },
    ],
  };
  state.main.charts.data1.setOption(option);
  state.main.charts.myCharts.push(state.main.charts.data1);
};
const initChart2 = (data) => {
  state.main.charts.data2 = markRaw(echarts.init(chart2Ref.value));
  var value = data;
  const option = {
    backgroundColor: "000",
    title: {
      text: `${value}人`,
      subtext: "应到人数",
      left: "center",
      top: "center", //top待调整
      textStyle: {
        color: "#fff",
        fontSize: 24,
        fontFamily: "DINAlternate-Bold",
      },
      subtextStyle: {
        color: "#fff",
        fontSize: 18,
        fontFamily: "PingFangSC-Regular",
        top: "center",
      },
      itemGap: 2, //主副标题间距
    },
    xAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "56%"],
        data: [
          {
            value: value,
            itemStyle: {
              normal: {
                borderWidth: 15,
                borderColor: {
                  colorStops: [
                    {
                      offset: 0,
                      color: "#376CCB" || "#00cefc", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#27DEF7" || "#367bec", // 100% 处的颜色
                    },
                  ],
                },
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
              },
            },
            label: {
              normal: {
                show: false,
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
          },
          {
            name: "gap",
            value: 288 - value,
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          },
        ],
      },
      //刻度尺
      {
        // name: "白色圈刻度",
        type: "gauge",
        radius: "87%",
        startAngle: 225, //刻度起始
        endAngle: -134.8, //刻度结束
        z: 4,
        axisTick: {
          show: true,
          lineStyle: {
            width: 2,
            color: "rgba(1,244,255, 0.9)",
          },
        },
        splitLine: {
          length: 16, //刻度节点线长度
          lineStyle: {
            width: 2,
            color: "rgba(1,244,255, 0.9)",
          }, //刻度节点线
        },
        axisLabel: {
          color: "rgba(255,255,255,0)",
          fontSize: 12,
        }, //刻度节点文字颜色
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            opacity: 0,
          },
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: 0,
            name: "",
          },
        ],
      },
      // 刻度圈
      {
        type: "pie",
        radius: ["0%", "73%"],
        center: ["50%", "50%"],
        avoidLabelOverlap: false,
        label: {
          normal: {
            show: false,
            position: "center",
          },
          emphasis: {
            show: false,
            textStyle: {
              fontWeight: "bold",
            },
          },
        },
        itemStyle: {
          normal: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0.05,
                  color: "rgba(32,36,107, 0.2)",
                },
                {
                  offset: 0.5,
                  color: "rgba(32,36,107,0.3)",
                },
                {
                  offset: 0.95,
                  color: "rgba(32,36,107, 0.2)",
                },
              ],
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        data: [
          {
            value: 3235,
          },
        ],
      },
    ],
  };
  state.main.charts.data2.setOption(option);
  state.main.charts.myCharts.push(state.main.charts.data2);
};
const getRow = (index: any) => {
  if (~~(index / 12) === 1 && index <= 12) return ~~(index / 12);

  if (~~(index % 12) === 0) {
    return ~~(index / 12);
  }
  return ~~(index / 12) + 1;
};

const getCol = (index: any) => {
  if (index % 12 === 0) return 12;
  return index % 12;
};

const getrightCol = (index: any) => {
  if (index % 12 === 0) return 24;
  return (index % 12) + 12;
};

// 批量设置 echarts resize
const initEchartsResizeFun = () => {
  nextTick(() => {
    for (let i = 0; i < state.main.charts.myCharts.length; i++) {
      setTimeout(() => {
        state.main.charts.myCharts[i].resize();
      }, i * 1000);
    }
  });
};
// 批量设置 echarts resize
const initEchartsResize = () => {
  window.addEventListener("resize", initEchartsResizeFun);
};

const getInfo = (code: string) => {
  useGetInfoApi({ code }).then(({ content }: any) => {
    state.header.left.number = content.normalNum;
    state.header.right.number = content.errorNum;
    state.inouts = content.inouts || 0;
    content.position =
      content.position.map((item) => {
        return {
          ...item,
          status: 1,
        };
      }) || [];
    state.inSeat = content.position.reduce((acc, curr) => {
      return curr.status === 1 ? acc + 1 : acc;
    }, 0);
    state.outSeat = content.position.reduce((acc, curr) => {
      return curr.status === 2 ? acc + 1 : acc;
    }, 0);
    state.allEmployee = content.position.length;
    // initChart1(state.inSeat)
    // initChart2(state.allEmployee)

    state.leftMap.clear();
    state.rightMap.clear();
    state.left = content.position.filter((item) => {
      return item.col <= 12;
    });
    // state.left = state.left.map((item) => {
    //  item.status=1
    //  return item
    // })
    state.right = content.position.filter((item) => {
      return item.col > 12;
    });

    state.left.forEach((item) => {
      state.leftMap.set(item.row + "_" + item.col, item);
    });
    state.right.forEach((item) => {
      state.rightMap.set(item.row + "_" + item.col, item);
    });
  });
};

setInterval(() => {
  const code = getUrlParams(window.location.href);
  getInfo(code);
}, 5000);

onMounted(() => {
  const code = getUrlParams(window.location.href);
  getInfo(code);
  initEchartsResize();
});
</script>

<style scoped lang="scss">
@media screen and (min-width: 768px) and (max-width: 1524px) {
  .info-item .left-title {
    font-size: 18px !important;
  }

  .header-title {
    font-size: 40px !important;
  }
  .main .head .left-title {
    font-size: 24px !important;
  }
  .main .head .left-time {
    font-size: 24px !important;
  }
  .left-content .leave {
    font-size: 16px !important;
  }
  .left-content .name {
    font-size: 16px !important;
  }
}

@media screen and (min-width: 1525px) {
  .info-item .left-title {
    font-size: 20px !important;
  }
  .header-title {
    font-size: 44px !important;
  }
  .main .head .left-title {
    font-size: 28px !important;
  }
  .main .head .left-time {
    font-size: 28px !important;
  }
  .left-content .leave {
    font-size: 20px !important;
  }
  .left-content .name {
    font-size: 34px !important;
  }
}

@media screen and (max-width: 767px) {
  .info-item .left-title {
    font-size: 12px !important;
  }
  .header-title {
    font-size: 12px !important;
  }
  .main .head .left-title {
    font-size: 12px !important;
  }
  .main .head .left-time {
    font-size: 12px !important;
  }
  .left-content .leave {
    font-size: 12px !important;
  }
  .left-content .name {
    font-size: 12px !important;
  }
}

.container {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/warp.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .header {
    height: 14vh;
    /* background-color: aquamarine; */
    width: 100%;
    box-sizing: border-box;
    background-image: url("@/assets/Group 137.png");
    background-size: 100% 100%;
    display: flex;
    position: relative;
    margin-bottom: 20px;

    .header-info {
      display: flex;
      align-items: center;
      margin-left: 4vw;

      .info-item {
        display: flex;
        margin-right: 20px;

        .left {
          display: flex;
          flex-direction: column;
          color: #fff;
          align-items: center;
          justify-content: space-around;

          .left-title {
            font-size: 18px;
          }

          .left-number {
            font-size: 24px;
          }
        }

        .right {
          .right-picwarp {
            position: relative;
            margin-left: 15px;

            .right-pic {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
    }

    .header-title {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 64px;
    }

    .header-time {
      position: absolute;
      top: 50%;
      right: 130px;
      color: #fff;
      transform: translate(0, -50%);
      font-size: 24px;
    }
  }

  .main {
    display: flex;
    padding-left: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
    flex: 1;

    .left {
      flex: 6;
      display: flex;
      flex-direction: column;

      .warp {
        flex: 4;
        background-color: rgba(19, 12, 33, 0.98);
        border-radius: 16px;
        display: flex;
        flex-direction: column;

        .head {
          display: flex;
          color: #fff;
          font-size: 38px;
          justify-content: center;
          padding-bottom: 20px;
          position: relative;

          .left-time {
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translate(0%, -50%);
          }
        }

        .left-content {
          flex: 1;
          display: flex;
          justify-content: space-between;

          .seat {
            width: calc(100% / 12.5);
            height: calc(100% / 12.8);
            margin-bottom: 5px;
            color: #fff;
            // background-color: rgb(42, 204, 240);
            border-radius: 8px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }

          .seat-left {
            width: 49%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: start;
            // background-color: #52f02a;
            border-radius: 4px;

            .content-warp {
              padding: 0 4px;
              .name {
                color: white;
                font-size: 37px;

                background: #141984;
              }
            }

            .img-warp {
              display: flex;
              justify-content: center;

              img {
                width: 50px;
                height: 50px;
              }
            }

            .leave {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              color: yellow;
              font-size: 37px;

              background: #660703;

              //background: url('@/assets/content/icon-2.png') no-repeat;
              //background-size: 100% 100%;
            }

            .idle {
              width: 100%;
              height: 100%;
              // background: url('@/assets/content/icon-3.png') no-repeat;
              // background-size: 100% 100%;
              background-color: #660703;
            }
          }

          .seat-right {
            width: 49%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-content: start;
            // background-color: #a4f02a;
            border-radius: 4px;

            .content-warp {
              .name {
                color: white;
                font-size: 37px;

                background: #141984;
              }
            }

            .img-warp {
              display: flex;
              align-items: center;

              img {
                width: 50px;
                height: 50px;
              }
            }

            .leave {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              color: yellow;
              font-size: 37px;

              background: #660703;
            }

            .idle {
              width: 100%;
              height: 100%;
              // background: url('@/assets/content/icon-3.png') no-repeat;
              // background-size: 100% 100%;
              background-color: #660703;
            }
          }
        }
      }

      .left-charts {
        flex: 1;
        display: flex;
        padding: 0 20px 0 20px;

        .chart1 {
          flex: 2;
        }

        .chart2 {
          flex: 2;
        }

        .icon {
          flex: 3;
          display: flex;
          justify-content: space-around;
          align-items: center;
          background-color: rgba(13, 13, 49, 1);
          color: #fff;
          font-size: 20px;

          img {
            margin-bottom: 10px;
            width: 64px;
            height: auto;
          }

          .icon-warp {
            display: flex;
            flex-direction: column;
            align-items: center;
          }
        }
      }
    }

    .main-right {
      flex: 1;
      color: #fff;
      background-color: rgba(13, 13, 49, 1);
      border-radius: 16px;
      padding-top: 40px;
      display: flex;
      flex-direction: column;

      .right-title {
        font-size: 36px;
      }

      .right-content {
        padding: 10px;
        flex: 1;
        overflow-y: scroll;

        .people {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24px;
          margin-bottom: 8px;

          .avater {
            display: flex;
            align-items: center;

            img {
              width: 44px;
              height: 44px;
            }
          }

          .info {
            flex: 1;
            display: flex;
            padding: 0 10px;
            justify-content: space-between;
          }

          .status {
            display: flex;
            align-items: center;

            img {
              width: 44px;
              height: 44px;
            }
          }
        }
      }
    }
  }
}

.bix {
  color: #141984;
  color: #660703;
}
</style>
